<template>
  <div class="todo-list" :class="{'todo-list__selected':!!selected}">
    <ul :style="{ width: `${todos.length * 100}%` }">
      <li
        v-for="todo in todos"
        :key="todo.name"
        :style="{transform: `translate3d(-${currentIndex * 100}%,0,0)`}"
      >
        <todo :todo="todo" :selected="selected && todo === selected.todo" @select="selectTodo"></todo>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Todo from "./Todo";
export default {
  components: {
    Todo
  },
  mounted() {
    // console.log(this.$el);
    let touch = {};
    this.$el.addEventListener("touchstart", ev => {
       console.log(ev);

      touch.startX = ev.touches[0].clientX;
      touch.endX = 0;
    });
    this.$el.addEventListener("touchmove", ev => {
      // console.log(222)

      touch.endX = ev.touches[0].clientX;
    });
    this.$el.addEventListener("touchend", () => {
      console.log(this.currentIndex);
      if (!touch.endX || Math.abs(touch.endX - touch.startX) < 10) {
        return;
      }
      if (touch.endX < touch.startX) {
        this.nextTodo();
        // console.log("next");
      } else {
        this.prevTodo();
        // console.log("last");
      }
    });
  },
  computed: {
    ...mapState(["todos", "currentIndex", "selected"])
  },
  methods: {
    ...mapMutations(["selectTodo", "nextTodo", "prevTodo"])
  }
};
</script>

<style lang="scss" >
.todo-list {
  flex: 1;
  padding: 15px 32px;
  height: 400px;
  // height: 100%;
  overflow: hidden;
  transition: all 0.5s ease;

  > ul,
  > ul > li {
    display: flex;
    height: 100%;
  }
  > ul > li {
    flex: 1;
    transition: transform 0.5s ease;
  }
  .todo {
    border-radius: 8px;
    background-color: white;
  }
}
// .todo-list__selected {
//   transform: scaleX(1.5);
// }
</style>